<template>
  <div class="config-wx" v-loading="loading">
    <el-form label-position="top" :model="formData" ref="formRef">
      <div class="wx-title">微信小程序商城配置</div>
      <el-form-item prop="shop_name" label="商城名称" :rules="[
        { required: true, message: '输入商城名称', trigger: 'blur' },
      ]">
        <el-input v-model="formData.shop_name" placeholder="商城名称" style="width: 40%" />
      </el-form-item>

      <el-form-item prop="shop_share_title" label="分享广告语" :rules="[
        { required: true, message: '输入分享广告语', trigger: 'blur' },
      ]">
        <el-input v-model="formData.shop_share_title" placeholder="分享广告语" style="width: 40%" />
      </el-form-item>

      <el-form-item label="分享图片" :rules="[
        { required: true, message: '上传分享图片', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in wxList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(1, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false" :file-list="wxList"
          :on-change="onChange(1)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="首页LOGO" :rules="[
        { required: true, message: '上传首页LOGO', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in imgList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(2, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false" :file-list="imgList"
          :on-change="onChange(2)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="首页背景图" :rules="[
        { required: true, message: '上传首页背景图', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in mainBgList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(3, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="mainBgList" :on-change="onChange(3)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="个人中心背景图" :rules="[
        { required: true, message: '上传个人中心背景图', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in mineBgList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(4, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="mineBgList" :on-change="onChange(4)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="会员等级背景图" :rules="[
        { required: true, message: '上传会员等级背景图', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in levelBgList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(5, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="levelBgList" :on-change="onChange(5)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="加入会员广告图" :rules="[
        { required: true, message: '上传加入会员广告图', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in joinVipAdList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(6, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="joinVipAdList" :on-change="onChange(6)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="分享海报" :rules="[
        { required: true, message: '上传分享海报', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in sharePosterList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(7, i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false"
          :file-list="sharePosterList" :on-change="onChange(7)">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item prop="btn_color" label="色调配置" :rules="[
        { required: true, message: '选择色调配置', trigger: 'change' },
      ]">
        <el-color-picker v-model="formData.btn_color"></el-color-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { uploadImgApi } from "@/plugins/api/upload";
import { configAddApi } from "@/plugins/api/system/config";
import { configApi } from "@/plugins/api/login";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();

let formData = ref({});
let formRef = ref(null);

// 分享图片
let wxList = ref([]);
let wxLogo = ref("");

// 商城logo
let siteLogo = ref("");
let imgList = ref([]);
let loading = ref(false);

// 首页背景图
let mainBgList = ref([]);

// 个人中心背景图
let mineBgList = ref([]);


// 会员等级背景图
let levelBgList = ref([]);


// 加入会员广告图
let joinVipAdList = ref([]);


// 分享海报图
let sharePosterList = ref([]);

const onChange = (type) => {
  return (file, fileList) => {
    // 在这里，你可以通过 type 来区分是哪个上传器触发了事件
    console.log(`Uploader ${type} file changed`, file, fileList);
    // 执行其他逻辑...  
    let formData = new FormData();
    formData.append("file", file.raw);
    loading.value = true;
    uploadImgApi(formData)
      .then((data) => {
        let obj = {
          url: import.meta.env.VITE_APP_BASE_API + data.file_url,
        };
        switch (type) {
          case 1:
            // 上传分享图片
            wxLogo.value = data.file_url;
            if (wxList.value.length > 0) {
              wxList.value = [];
              wxList.value.push(obj);
            } else {
              wxList.value.push(obj);
            }

            break;

          case 2:
            // 上传首页LOGO
            siteLogo.value = data.file_url;
            if (imgList.value.length > 0) {
              imgList.value = [];
              imgList.value.push(obj);
            } else {
              imgList.value.push(obj);
            }
            break;

          case 3:
            // 上传首页背景图
            if (mainBgList.value.length > 0) {
              mainBgList.value = [];
              mainBgList.value.push(obj);
            } else {
              mainBgList.value.push(obj);
            }
            break;
          case 4:
            // 个人中心背景图
            if (mineBgList.value.length > 0) {
              mineBgList.value = [];
              mineBgList.value.push(obj);
            } else {
              mineBgList.value.push(obj);
            }
            break;
          case 5:
            // 会员等级背景图
            if (levelBgList.value.length > 0) {
              levelBgList.value = [];
              levelBgList.value.push(obj);
            } else {
              levelBgList.value.push(obj);
            }
            break;
          case 6:
            // 加入会员广告图
            if (joinVipAdList.value.length > 0) {
              joinVipAdList.value = [];
              joinVipAdList.value.push(obj);
            } else {
              joinVipAdList.value.push(obj);
            }
            break;
          case 7:
            // 分享海报
            if (sharePosterList.value.length > 0) {
              sharePosterList.value = [];
              sharePosterList.value.push(obj);
            } else {
              sharePosterList.value.push(obj);
            }
            break;
          default:
            loading.value = false;
            break;
        }
        loading.value = false;
        //
      })
      .catch(() => {
        loading.value = false;
      });
  };
}
// 删除
const handleRemove = (type, index) => {
  switch (type) {
    case 1:
      wxList.value.splice(index, 1);
      wxLogo.value = null;
      break;

    case 2:
      imgList.value.splice(index, 1);
      siteLogo.value = null;
      break;
    case 3:
      mainBgList.value.splice(index, 1);
      break;
    case 4:
      mineBgList.value.splice(index, 1);
      break;
    case 5:
      levelBgList.value.splice(index, 1);
      break;
    case 6:
      joinVipAdList.value.splice(index, 1);
      break;
    case 7:
      sharePosterList.value.splice(index, 1);
      break;
    default:
      break;
  }
}

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    const shop_bgimg = mineBgList.value && mainBgList.value.length ? mainBgList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const ucenter_bg = mainBgList.value && mineBgList.value.length ? mineBgList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const user_grade_bg = levelBgList.value && levelBgList.value.length ? levelBgList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const user_in_bg = joinVipAdList.value && joinVipAdList.value.length ? joinVipAdList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    const shop_adimg = sharePosterList.value && sharePosterList.value.length ? sharePosterList.value[0].url.replace(import.meta.env.VITE_APP_BASE_API, '') : null
    if (valid) {
      let arr = [
        {
          conf_name: "wechat.shop_name",
          conf_value: formData.value.shop_name,
        },
        {
          conf_name: "wechat.shop_share_title",
          conf_value: formData.value.shop_share_title,
        },
        {
          conf_name: "wechat.shop_logo",
          conf_value: siteLogo.value,
        },
        {
          conf_name: "wechat.shop_share_img",
          conf_value: wxLogo.value,
        },
        {
          conf_name: "wechat.shop_bgimg",
          conf_value: shop_bgimg,
        },
        {
          conf_name: "wechat.ucenter_bg",
          conf_value: ucenter_bg,
        },
        {
          conf_name: "wechat.user_grade_bg",
          conf_value: user_grade_bg,
        },
        {
          conf_name: "wechat.user_in_bg",
          conf_value: user_in_bg,
        },
        {
          conf_name: "wechat.shop_adimg",
          conf_value: shop_adimg,
        },
        {
          conf_name: "wechat.btn_color",
          conf_value: formData.value.btn_color,
        }
      ];

      loading.value = true;
      configAddApi(arr)
        .then(() => {
          ElMessage.success("提交成功！");
          getConfigApi();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
let info = ref({});
const getConfigApi = () => {
  configApi({
    conf_name: "wechat",
  }).then((data) => {
    info.value = Object.assign({}, data.wechat);
    formData.value.shop_name = data.wechat.shop_name;
    formData.value.shop_share_title = data.wechat.shop_share_title;
    formData.value.btn_color = data.wechat.btn_color;
    //商城logo
    if (data.wechat.shop_logo) {
      siteLogo.value = data.wechat.shop_logo;
      imgList.value = [];
      imgList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.shop_logo,
      });
    }
    // 分享图片
    if (data.wechat.shop_share_img) {
      wxLogo.value = data.wechat.shop_share_img;
      wxList.value = [];
      wxList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.shop_share_img,
      });
    }
    // 商城首页背景图
    if (data?.wechat?.shop_bgimg) {
      mainBgList.value = [];
      mainBgList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.shop_bgimg,
      });
    }
    // 个人中心背景图
    if (data?.wechat?.ucenter_bg) {
      mineBgList.value = [];
      mineBgList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.ucenter_bg,
      });
    }
    // 会员等级背景图
    if (data?.wechat?.user_grade_bg) {
      levelBgList.value = [];
      levelBgList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.user_grade_bg,
      });
    }
    // 加入会员广告图
    if (data?.wechat?.user_in_bg) {
      joinVipAdList.value = [];
      joinVipAdList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.user_in_bg,
      });
    }
    // 分享海报
    if (data?.wechat?.shop_adimg) {
      sharePosterList.value = [];
      sharePosterList.value.push({
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.shop_adimg,
      });
    }

  });
}
onMounted(() => {
  getConfigApi();
});
</script>
<style lang="scss" scoped>
.config-wx {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;

  .wx-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
